<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片 -->
		<el-card class="box-card">
			<!-- 提示 -->
			<el-alert title="注意：只能为第三级分类设置相关参数" type="warning" show-icon :closable="false"></el-alert>
			<!-- 下拉选择 -->
			<el-row class="cate_opt">
				<el-col>
					<span>选择商品分类:</span>
					<el-cascader v-model="value" :options="options" :props="props" @change="handleChange"></el-cascader>
				</el-col>
			</el-row>
			<!-- 标签页 -->
			<el-tabs v-model="activeName" @tab-click="tabClick">
				<!-- 添加动态参数的面板 -->
				<el-tab-pane label="动态参数" name="first">
					<Params_dynamic
						:IsShowAddbtn="IsShowAdddybtn"
						:tableData="dylist"
						:CateID="this.CateID"
						@dateupdata="getParams"
					></Params_dynamic>
					<!-- 分页区域 -->
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="query.page"
						:page-sizes="[ 1, 3, 5, 10, 20, 50]"
						:page-size="query.limit"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					></el-pagination>
				</el-tab-pane>
				<!-- 添加静态属性的面板 -->
				<el-tab-pane label="静态属性" name="second">
					<Params_static
						:IsShowAddbtn="IsShowAdddybtn"
						:tableData="staticlist"
						:CateID="this.CateID"
						@dateupdata="getParams"
					></Params_static>
					<!-- 分页区域 -->
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="query.page"
						:page-sizes="[ 1, 3, 5, 10, 20, 50]"
						:page-size="query.limit"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					></el-pagination>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script>
import Params_dynamic from './Params_dynamic'
import Params_static from './Params_static'
export default {
	created() {
		this.getCateList()
	},
	components: {
		Params_dynamic,
		Params_static
	},
	data() {
		return {
			options: [],
			value: [],
			props: {
				expandTrigger: 'hover',
				value: 'id',
				label: 'cateName',
				children: 'vcates'
			},
			activeName: 'first',
			query: {
				CateId: 0,
				type: null,
				page: 1,
				limit: 10
			},
			total: 0,
			//动态参数的数据
			dylist: [],
			//静态属性的数据
			staticlist: []
		}
	},
	methods: {
		getCateList() {
			this.$get('/api/Cate/GetCateTree', {
				few: 3
			}).then(res => {
				if (res.code == 0) {
					this.options = res.data
				}
			})
		},
		//切换下拉时触发
		handleChange() {
			this.query.page = 1
			this.query.limit = 10
			if (this.value.length != 3) {
				this.value = []
				this.getParams()
			} else {
				this.getParams()
			}
		},
		//切换标签的时触发
		tabClick(tob) {
			this.query.page = 1
			this.query.limit = 10
			this.getParams()
		},
		getParams() {
			this.query.CateId = this.CateID
			this.query.type = this.getType
			this.$get('/api/Params/GetParamsList', this.query)
				.then(res => {
					if (res.code == 0) {
						this.total = res.count
						if (this.query.type == 0) {
							this.dylist = res.data
						} else {
							this.staticlist = res.data
						}
					}
				})
				.catch(err => {
					console.log(err)
				})
		},
		//监听pagesize改变的事件
		handleSizeChange(newsize) {
			console.log(newsize)
			this.query.limit = newsize
			this.getParams()
		},
		//监听页码值改变的事件
		handleCurrentChange(newpage) {
			console.log(newpage)
			this.query.page = newpage
			this.getParams()
		},
	},
	computed: {
		IsShowAdddybtn() {
			if (this.value.length == 3) {
				return false
			} else {
				return true
			}
		},
		//当前选中的三级分类的id
		CateID() {
			if (this.value.length == 3) {
				return this.value[this.value.length - 1]
			} else {
				return null
			}
		},
		getType() {
			if (this.activeName == 'first') {
				return 0
			} else {
				return 1
			}
		}
	}
}
</script>

<style lang="stylus" scoped>
.cate_opt {
	margin: 15px 0;
}
</style>